<template>
	<vCommonPage type="1" title="门诊缴费">
		<div slot="customContent" class="contentX mzjf">
			<div class="topBoxByJf">
				<div class="daysBtnBox">
					<div :class="queryDays == 0 ?'daysBtn btnLeft btnClick':'daysBtn btnLeft'" @click="choseDays(0)">今日
					</div>
					<div :class="queryDays == 1 ?'daysBtn btnRight btnClick':'daysBtn btnRight'" @click="choseDays(1)">
						今日+昨日</div>
					<!-- 					<el-button class="daysBtn" @click="choseDays(90)">90天</el-button>
					<el-button class="daysBtn" @click="choseDays(365)">365天</el-button> -->
				</div>
			</div>

			<div class="tableBox">
				<!-- 真实数据模板 -->
				<div class="tableBoxItem" v-for="(item,index) in tableData" v-if="!isEmpty">
					<div class="tableBoxItemTitle">{{item.prescDate}}</div>
					<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
						:data="item.list" :show-overflow-tooltip="true">
						<el-table-column prop="deptName" label="就诊科室"></el-table-column>
						<el-table-column prop="doctorName" label="就诊医生"></el-table-column>
						<el-table-column prop="prescDate" label="就诊日期"></el-table-column>
						<el-table-column prop="amount" label="费用总额"></el-table-column>
						<el-table-column width="230" label="操作">
							<template slot-scope="scope">
								<el-button class="elBtn" @click="detail(scope.row)" type="primary" size="medium">详情
								</el-button>
								<el-button class="elBtn" @click.once="payItem(scope.row)" type="success" size="medium">
									支付
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				
				<!-- 空数据模板 -->
				<el-table v-if="isEmpty" class="table" :header-cell-style="$tableTitleStye"
					:cell-style="{color:'#435C7A'}" :data="emptyData" :show-overflow-tooltip="true">
					<el-table-column prop="deptName" label="就诊科室"></el-table-column>
					<el-table-column prop="doctorName" label="就诊医生"></el-table-column>
					<el-table-column prop="prescDate" label="就诊日期"></el-table-column>
					<el-table-column prop="amount" label="费用总额"></el-table-column>
					<el-table-column width="230" label="操作">
						<template slot-scope="scope">
							<el-button class="elBtn" @click="detail(scope.row)" type="primary" size="medium">详情
							</el-button>
							<el-button class="elBtn" @click.once="payItem(scope.row)" type="success" size="medium">支付
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		paidOrders
	} from "@api/apiBox/mzjf"
	export default {
		name: "mzjf",
		data() {
			return {
				tableData: [],
				totalPay: 0,
				queryDays: 0,
				emptyData: [],
				isEmpty: false
			};
		},
		methods: {
			payItem(item) {
				this.$store.dispatch("recipel/updateRecordsInfo", item); //存储缴费订单信息 -- 没有订单ID
				console.log(item, '存储缴费订单')
				this.$router.push({
					name: 'mzcz',
					query: {
						title: "门诊缴费",
						code: 'mzjf'
					}
				})
			},
			detail(item) {
				this.$router.push({
					name: 'mzjfIndexNext',
					query: {
						title: "门诊缴费",
						data: JSON.stringify(item)
					}
				})
			},
			async init() {
				let _this = this;
				let data = {
					data: {
						"patientId": this.$store.state.user.userinfo.patientId, //患者ID
						queryDays: this.queryDays
					},
					that: _this
				};
				const res = await paidOrders(data);
				this.makeUpNewData(res.data);
			},
			makeUpNewData(data) {
				if(!data){
					this.tableData = [];
					this.isEmpty = true;
					return;
				}else{
					this.isEmpty = false;
				}
				for(let item of data){
					item.amount = 0;
					item.receiptNos = [];
					for(let priceItem of item.orders){
						item.amount+=  parseFloat(priceItem.amount);
						item.receiptNos.push(priceItem.receiptNo)
					}
					item.amount = parseFloat(parseFloat(item.amount).toFixed(2));
				}
				let map = {}
				let arr = data;
				for (let item of arr) {
					if (item.PrescDate != "") {
						item.newPrescDate = (item.prescDate).split(' ').length > 0 ? (item.prescDate).split(' ')[0] : ''
					}
				}
				//拆分数据 根据天数拆分
				for (let i = 0; i < arr.length; i++) {
					let ai = arr[i]
					if (!map[ai.newPrescDate]) {
						map[ai.newPrescDate] = [ai]
					} else {
						map[ai.newPrescDate].push(ai)
					}
				}
				let newList = []
				Object.keys(map).forEach(key => {
					newList.push({
						prescDate: key,
						list: map[key],
					})
				})
				console.log('nnewListew', newList)
				if (newList.length == 0) {
					this.isEmpty = true;
				}
				console.log('isEmpty', this.isEmpty)
				console.log('newList',newList)
				this.tableData = newList;
			},
			choseDays(days) {
				this.queryDays = days;
				this.init();
			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.init();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzjf/mzjfDetail.scss";
</style>
<style>

</style>
